<template>
    <div
        class="hotel_map"
        id="hotel_map"
    >
    </div>
</template>

<script>

export default {
    components: {},
    props: {
        list: Array,
        city: String,
        currentMarkerIndex: Number,
    },
    data() {
        return {
            map: null, //地图实例
            onMapLoad: 'onMapLoad', //地图加载完毕回调名称
            markerManagers: [], //点标记管理
        };
    },
    methods: {
        //初始化地图
        initMap() {

            //实例化地图组件
            this.map = new AMap.Map('hotel_map', {
                resizeEnable: true
            });
            if (!this.city) { //不存在城市，则使用定位城市信息
                //使用插件
                AMap.plugin(['AMap.CitySearch'], () => { //异步加载插件

                    const citySearch = new AMap.CitySearch(); //城市搜索插件

                    citySearch.getLocalCity((status, result) => {
                        if (status === 'complete' && result.info === 'OK') {
                            // 查询成功，result即为当前所在城市信息
                            const { city } = result;
                            this.$message.success(`当前定位城市：${city}`);
                            //更新查询字符串
                            this.$emit('located', city);
                        }
                    })
                })
            }
        },
        //创建标记集
        createdMarkers() {
            if (this.map) {//map实例已挂载
                //清除标记集
                this.map.clearMap();

                //映射新的标记集
                this.markerManagers = this.list.map((v, i) => {
                    const position = new AMap.LngLat(v.location.longitude, v.location.latitude);// 经纬度对象
                    // 信息窗体
                    const infoWindow = new AMap.InfoWindow({
                        content: `<div>${v.name}</div>`,  //传入 dom 对象，或者 html 字符串
                        offset: new AMap.Pixel(-5, -30), //偏移量
                    });
                    // 点对象
                    const marker = new AMap.Marker({
                        position,
                        //标记内容
                        content: `<div style='display: inline-block; width: 22px;height: 36px;background-image: url(https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png);background-size: 22px 36px;text-align: center;line-height: 24px;color: #fff;'>${i +
                1}</div>`,
                    });

                    //鼠标移入开启信息窗口
                    marker.on('mouseover', () => {
                        this.showInfoWindow(i);
                    });
                    //鼠标移出则关闭
                    // marker.on('mouseout', () => {
                    //     this.hideInfoWindow(i);
                    // })

                    return { marker, position, infoWindow };
                });

                //追加新标记集
                const markers = this.markerManagers.map(v => v.marker);
                this.map.add(markers);
                this.map.setFitView(markers); //根据覆盖物调整视野
            }
        },

        //显示信息窗口
        showInfoWindow(index) {
            const markerManager = this.markerManagers[index];//当前标记管理
            const { infoWindow, position } = markerManager; //拿取信息窗口和坐标
            infoWindow.open(this.map, position); //开启信息窗口
            this.map.setCenter(position); //设置地图中心
        },

        // 关闭信息窗口
        hideInfoWindow(index) {
            const markerManager = this.markerManagers[index];//当前标记管理
            const { infoWindow } = markerManager;//拿取信息窗口和坐标
            infoWindow.close();//关闭信息窗口
        }
    },

    mounted() {
        //异步加载地图Api
        if (!window.AMap) { //不存在AMap
            const { onMapLoad } = this;//拿取回调名
            window[onMapLoad] = () => {
                this.initMap();//window加载完毕初始化地图
            }
            var url = `https://webapi.amap.com/maps?v=1.4.15&key=9eb389d4ec947bf1f8c1f2ac81c6afd9&callback=${onMapLoad}`;
            var jsapi = document.createElement('script');
            jsapi.charset = 'utf-8';
            jsapi.src = url;
            document.head.appendChild(jsapi);
        } else {
            this.initMap();
        }
    },

    watch: {
        list() { //监听列表，更新标记集
            this.createdMarkers();//创建标记集
        },
        currentMarkerIndex(newVal, oldVal) {//监听当前标记索引
            this.hideInfoWindow(oldVal); //关闭旧窗口
            this.showInfoWindow(newVal);//开启新窗口
        }
    }
}
</script>

<style lang="less" scoped>
.hotel_map {
    width: 100%;
    height: 100%;
}
</style>